/**
 * make a input field autocompleteable
 * response =
 *
 * @param string container id
 * @param string data source
 * @param string callback that handles on select event
 * @param int min. query length before fire xhr req.
 *
 */
var phpmyTextBoxAutocomplete = function(containerid, datasource, onselectcallback, querylength){
    // glue container
    var el = new YAHOO.util.Dom.get(containerid);
    var nel = document.createElement("div");
    nel.id = containerid + '_accont';
    // insert in document.body as first element
    YAHOO.util.Dom.insertBefore(nel, el);
    // move element to container
    var el = new YAHOO.util.Element(containerid);
    el.appendTo(containerid + '_accont');
    // now insert answer box
    var nel = document.createElement("div");
    nel.id = containerid + '_acanswer';
    YAHOO.util.Dom.insertAfter(nel, containerid);

    var oDS = new YAHOO.util.XHRDataSource(datasource);
    // Set the responseType
    oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
    // Define the schema of the delimited results
    oDS.responseSchema = {
        resultsList : "Results",
        fields : ["field", "id"]
    };

    // Enable caching
    oDS.maxCacheEntries = 5;

    // Instantiate the AutoComplete
    var oAC = new YAHOO.widget.AutoComplete(containerid, containerid + "_acanswer", oDS);
    oAC.queryDelay = .5;
    oAC.animSpeed = 0.1;
    oAC.allowBrowserAutocomplete = false;
    oAC.maxResultsDisplayed = 100;
    oAC.minQueryLength = querylength ? querylength : 3;
    oAC.generateRequest = function(sQuery) {
          return "&query=" + sQuery ;
    };
    if (onselectcallback)
        oAC.itemSelectEvent.subscribe(onselectcallback);
    return {
        oDS: oDS,
        oAC: oAC
    };

}